<template>
	<view>
		<view class="container">
			<view class="center">
				<u-navbar title="发帖" @rightClick="rightClick" :autoBack="true">
				</u-navbar>
			</view>
		</view>
		<view class="mgl">
			<input placeholder="请输入标题（5-30个字）" border="bottom" v-model="title" :maxlength='30'
				placeholder-style="font-size: 32rpx;font-weight: bold;color: #D2D2D2;" />
		</view>
		<view class="txt_area mgl">
			<textarea class="ara" v-model="content" placeholder="请输入正文（建议50-500个字）" border="none" autoHeight count
				:maxlength='2000' rows="4" placeholder-style="font-size: 24rpx;color: #D3D3D3;"></textarea>
		</view>
		<!-- <view class="upload">
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
				:maxCount="10"></u-upload>
		</view> -->
		<view class="uploadList">
			<view class="add" v-if="images.length > 0" v-for="(item, index) in images" :key="index">
				<image class="box" :src="item" mode=""></image>
				<image @click="deleteImg(index)" class="xsss" src="../../static/xsss.png" mode=""></image>
			</view>

			<view class="add" @click="changeAvatarUrl">+</view>
		</view>
		<view class="bot">
			<view class="flx">
				<view class="btn yl" @click="previewCircle">预览</view>
				<view class="btn btn1" @click="publishCircle">立即发布</view>
			</view>
		</view>
		<!-- 上传照片 -->
		<Upload v-if="isUpload" :type="uploadType" :num='9' @getImgs="getImgsFunc" @getFiles="getFileFunc"></Upload>
	</view>
</template>

<script>
	import Upload from '@/components/upload/upload.vue';
	export default {
		components: {
			Upload
		},
		data() {
			return {
				typeId: 0,
				title: '',
				content: '',
				images: [],
				fileList1: [],
				imgPath: '',
				isUpload: false,
				uploadType: 'image'
			}
		},
		methods: {
			previewCircle() {
				if (!this.title || this.title == '') {
					uni.showToast({
						title: '请输入宇宙标题',
						mask: false,
						duration: 1000
					});
					return;
				}
				if (!this.content || this.content == '') {
					uni.showToast({
						title: '请输入宇宙内容',
						mask: false,
						duration: 1000
					});
					return;
				}
				uni.setStorageSync('title', this.title);
				uni.setStorageSync('content', this.content);
				uni.setStorageSync('images', this.images);
				uni.navigateTo({
					url: '/pages/universe/preview'
				});
			},
			rightClick() {
				console.log('rightClick');
			},
			publishCircle() {
				console.log('publishCircle');
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._postBody('plus/circle/addCircle', {
					typeId: self.typeId,
					title: self.title,
					content: self.content,
					pigList: self.images
				}, function(res) {
					uni.hideLoading();
					//TODO: 跳转到列表列表界面
					uni.navigateTo({
						url: '/pages/universe/goiss'
					});
				});
			},
			// 删除图片
			deleteImg(index) {
				this.images.splice(index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				//清除已经存在的图片
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.websiteUrl + '/api/front/file/upload/image', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			changeAvatarUrl() {
				console.log("images",this.images.length)
				if(this.images.length>=9){
					uni.showModal({
						title: '提示',
						content: '最多上传9张图片',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				let self = this;
				// if (self.isUpload) {
				// 	uni.showToast({
				// 		title: '再次点击更改头像',
				// 		icon: 'none'
				// 	})
				// }
				self.isUpload = !self.isUpload;
			},
			/*获取上传的图片*/
			getImgsFunc(e) {
				let self = this;
				self.isUpload = false;
				if (e && typeof(e) != 'undefined') {
					let self = this;
					this.images.push(e[0].filePath)
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss">
	.container {
		height: 44px;
	}

	.bot {
		position: fixed;
		width: 100%;
		// bottom: 84rpx;
		top: calc(100% - 120rpx);
	}

	.u-textarea {
		min-height: 400rpx;
	}

	.flx {
		display: flex;
		justify-content: space-around;

		.btn {
			width: 220rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #D3D3D3;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
		}

		.btn1 {
			background: #2168EA;
		}

		.yl {
			background: #faa90d;
		}
	}

	.upload {
		margin-left: 20rpx;
		margin-top: 100rpx;
	}

	.uploadList {
		/* margin: 53rpx; */
		/* margin-bottom: 50rpx; */
		display: flex;
		align-items: center;
		// gap: 20rpx;
		flex-wrap: wrap;
		// justify-content: space-between;
		padding: 20rpx;

		.add {
			position: relative;
			margin: 10rpx;
			height: 200rpx;
			width: 200rpx;
			background: #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #2168EA;
			flex: 0 0 calc(33.33% - 20rpx);
			/* 每个项目占据一行宽度的三分之一减去间隔 */
			box-sizing: border-box;
			/* 包含边框和内边距在宽度计算中 */
			.box{
				width: 100%;
				height: 100%;
			}
			.xsss{
				width: 20rpx;
				height: 20rpx;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
			}
		}

		.upload-file {
			width: 200rpx;
			height: 200rpx;
			background: #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #2168EA;
		}
	}

	.txt_area {
		height: 500rpx;
		overflow: auto;
	}

	.ara {
		width: 100%;
	}

	.mgl {
		padding: 0 30rpx 0 30rpx;
	}
</style>